
<script type="text/template-x" id="template-kind-editor">
    <div>
        <textarea ref="content" style="width:100%;height:40rem;visibility:hidden;"></textarea>
    </div>
</script>
<script>
    window.KindEditor.ready(function (K) {

        Vue.component('kind-editor', {
            template: '#template-kind-editor',
            props: ['value','tag'],
            data: function () {
                return {
                    editor: {},
                }
            },
            created: function () {
                this.$nextTick(function () {
                    this.init();
                }.bind(this));
            },
            methods: {
                init: function () {
                    let com = this;
                    this.editor = K.create(com.$refs.content, {
                        allowFileManager : false,
                        resizeType: 1,
                        autoHeightMode: true,
                        items: [
                            'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                            'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                            'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                            'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                            'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                            'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                            'audio', 'video', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                            'anchor', 'link', 'unlink', '|', 'about'
                        ],
                        afterCreate : function() {
                            this.html(com.value);
                        },
                        afterChange: function () {
                            let html = this.html();
                            com.outValue(html)
                        }
                    });
                },
                outValue: function (html) {
                    this.$emit('input', html);
                },
                inValue: function () {
                    this.editor.html(this.value);
                }
            },
            watch: {
                'tag': function (nv, ov) {
                    this.inValue();
                }
            }
        });

    });
</script>
